<template>
    <div class="content">
        <h3 class="user-title">{{'SAFE_AND_EFFECTIVE'|t}}</h3>
        <div class="form">
            <zx-form-group :title="$t('BANK_NAME')">
                <zx-input v-model="bankForm.name" :place="$t('BANK_NAME_PLACE')" ref="name" :rules="rules.name">
                </zx-input>
            </zx-form-group>
            <zx-form-group :title="$t('BANK')">
                <zx-input v-model="bankForm.bank" :place="$t('BANK_PLACE')" ref="bank" :rules="rules.bank">
                </zx-input>
            </zx-form-group>
            <zx-form-group :title="$t('BANK_BRANCH')">
                <zx-input v-model="bankForm.branch" :place="$t('BANK_BRANCH_PLACE')" ref="branch" :rules="rules.branch">
                </zx-input>
            </zx-form-group>
            <zx-form-group :title="$t('BANK_ADDREDD')">
                <zx-input v-model="bankForm.address" :place="$t('BANK_ADDREDD_PLACE')" ref="address" :rules="rules.address">
                </zx-input>
            </zx-form-group>
            <zx-form-group :title="$t('BANK_NUM')">
                <zx-input v-model="bankForm.bank_num" :place="$t('BANK_NUM_PLACE')" ref="bank_num" :rules="rules.bank_num">
                </zx-input>
            </zx-form-group>
            <zx-form-group>
                <input type="submit" class="submit-btn mt-20 green-btn radius" :value="$t('IMMEDIATELY_BINDING')" @click="submitForm('bankForm')">
            </zx-form-group>
        </div>
    </div>
</template>
<script>
    import { mapGetters } from 'vuex';
    import { Form, Func, Auth, Rules } from '@/providers';
    import { User, UserInfo } from '@/services';
    export default {
        data() {
            return {
                defalutIndex: 1,
                name: '',
                bankForm: {
                    name: '', // 持卡人姓名
                    bank: '', // 开户银行
                    branch: '', // 开户分行
                    address: '', // 开户地址
                    bank_num: '' // 银行卡号
                },
                bankList: [],
                rules: Rules
            };
        },
        methods: {
            async getData() {
                let _queryId = this.$route.query.id;
                if (!_queryId) return;
                try {
                    let res = await User.GetBankInfoByid({
                        token: Auth.getItem('token'),
                        bankId: _queryId
                    });
                    this.bankForm = res.data.bankInfo;
                } catch (error) {
                    console.log(error);
                }
            },
            // 表单提交
            async submitForm(formName) {
                if (!Form.validataForm(this, formName)) {
                    return false;
                }
                let _parmas = this[formName];
                let _queryId = this.$route.query.id;
                try {
                    let res = await User.ChangeBindBank({
                        name: _parmas.name,
                        bank: _parmas.bank,
                        bankId: _queryId,
                        branch: _parmas.branch,
                        address: _parmas.address,
                        bank_num: _parmas.bank_num,
                        token: Auth.getItem('token')
                    });
                    this.$dialog.toast({
                        msg: res.desc,
                        position: 'top',
                        onOk: () => {
                            this.$router.push('/user/bank');
                        }
                    });
                } catch (error) {
                    console.log(error);
                }
            },
            async getBankInfo() {
                try {
                    let res = await User.GetBankInfo({
                        token: Auth.getItem('token'),
                        userNo: Auth.getItem('userId')
                    });
                    this.bankList = res.data.bankList;
                } catch (error) {
                    console.log(error);
                }
            }
        },
        computed: {
            ...mapGetters([
                'userStatus'
            ])
        },
        created() {
            this.getData();
        }
    };
</script>
<style scoped lang="scss">
    @import "../../assets/sass/user.scss";
</style>